<template>
  <div class="TaskBusiness">
    <!-- 主体模块开始 -->
    <SearchAndList>
      <!-- 搜索部分开始 -->
      <template #search>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="工单编号" size="medium">
            <el-input
              v-model="searchForm.taskCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="工单状态" size="medium">
            <el-select v-model="searchForm.status" placeholder="请选择">
              <el-option label="全部" value="null"></el-option>
              <el-option
                v-for="item in taskStatusList"
                :key="item.statusId"
                :label="item.statusName"
                :value="item.statusId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="searchTaskList(true)"
              size="medium"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 搜索部分结束 -->
      <!-- 按钮开始 -->
      <template #buttons>
        <el-button size="medium" icon="el-icon-circle-plus-outline" @click="taskNew">新建</el-button>
        <el-button size="medium" @click="taskSetting">工单配置</el-button>
      </template>
      <!-- 按钮结束 -->
      <!-- 列表开始 -->
      <template #list>
        <el-table v-loading="loading" :data="taskData.currentPageRecords" style="width: 100%">
          <!-- 序号 -->
          <el-table-column type="index" :index="getIndex" label="序号" width="80" />
          <!-- 工单编号 -->
          <el-table-column prop="taskCode" label="工单编号" />
          <!-- 设备编号 -->
          <el-table-column prop="innerCode" label="设备编号" />
          <!-- 工单类型 -->
          <el-table-column label="工单类型">
            <template slot-scope="scope">
              <span>{{ scope.row.taskType?.typeName }}</span>
            </template>
          </el-table-column>
          <!-- 工单方式 -->
          <el-table-column label="工单方式">
            <template slot-scope="scope">
              <span>{{ scope.row.createType ? "手动" : "自动" }}</span>
            </template>
          </el-table-column>
          <!-- 工单状态 -->
          <el-table-column label="工单状态">
            <template slot-scope="scope">
              <span>{{ scope.row.taskStatusTypeEntity.statusName }}</span>
            </template>
          </el-table-column>
          <!-- 运营人员 -->
          <el-table-column prop="userName" label="运营人员" />
          <!-- 创建时间 -->
          <el-table-column prop="createTime" label="创建日期" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime.split('T').join(' ') }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="getTaskInof(scope.row.taskId)"
                type="text"
                size="small"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 列表结束 -->
      <!-- 底部分页开始 -->
      <template #bottom>
        <el-pagination
          @current-change="paginaTion"
          layout="slot, prev, next"
          :page-size="10"
          :total="getTotalCount"
          prev-text="上一页"
          next-text="下一页"
          background
        >
        <template>
          <div class="str">共{{ taskData.totalCount }}条记录&nbsp;&nbsp;第 {{ taskData.pageIndex }}/{{ taskData.totalPage }} 页</div>

        </template>
        </el-pagination>
      </template>
      <!-- 底部分页结束 -->
    </SearchAndList>
    <!-- 主体模块结束 -->
    <!-- 弹出窗开始 -->
    <TaskBusiness :visible.sync="dialogVisible" :dialogModel.sync="dialogModel" :taksInfo.sync="taksInfo" @update="searchTaskList(true)"/>
    <!-- 弹出窗结束 -->
  </div>
</template>

<script>
import { getTaskStatus, getTaskSearch, getTaskInof } from '@/api/taskAPIs'
import SearchAndList from '@/components/SearchAndList.vue'
import TaskBusiness from '@/components/Dialog/TaskBusiness.vue'
export default {
  components: {
    SearchAndList,
    TaskBusiness
  },
  data () {
    return {
      // 工单信息
      taksInfo: {},
      // 弹出框显示隐藏
      dialogVisible: false,
      // 弹出窗状态
      dialogModel: '',
      // 加载状态
      loading: false,
      // 分页索引
      pageIndex: 1,
      // 工单状态类型
      taskStatusList: [],
      // 工单搜索框
      searchForm: {
        taskCode: '',
        status: 'null'
      },
      // 获取的工单数据
      taskData: {
        currentPageRecords: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      }
    }
  },
  async created () {
    // 获取工单状态类型
    const { data: taskStatusList } = await getTaskStatus()
    this.taskStatusList = taskStatusList
    // 初始化工单列
    this.searchTaskList(true)
  },
  methods: {
    // 获取工单
    async searchTaskList (rest, plus) {
      // 改为加载状态
      this.loading = true
      // 如果需要重置
      if (rest) {
        this.pageIndex = 1
        this.taskIndex = 1
      }
      // 请求 API
      const { data } = await getTaskSearch({
        isRepair: false,
        pageIndex: this.pageIndex,
        pageSize: 10,
        taskCode: this.searchForm.taskCode ? this.searchForm.taskCode : null,
        status:
          this.searchForm.status === 'null' ? null : this.searchForm.status
      })
      // 吧数据存储
      this.taskData = data
      // 请求完同步一下pageIndex
      this.pageIndex = this.taskData.pageIndex
      // 结束加载状态
      this.loading = false
    },
    // 上一页下一页
    paginaTion (res) {
      if (!this.loading) {
        if (res > this.pageIndex) {
          this.pageIndex++
          this.searchTaskList(false, 0)
        } else {
          this.pageIndex--
          this.searchTaskList(false, 1)
        }
      }
    },
    // 计算索引
    getIndex (index) {
      if (this.pageIndex === '1') {
        return index + 1
      } else {
        return index + 10 * (this.pageIndex - 1) + 1
      }
    },
    // 吊起详情
    async getTaskInof (taskID) {
      this.dialogVisible = true
      this.dialogModel = 'info'
      const { data } = await getTaskInof(taskID)
      this.taksInfo = data
    },
    // 吊起工单配置
    taskSetting () {
      this.dialogVisible = true
      this.dialogModel = 'setting'
    },
    // 吊起新建工单
    taskNew () {
      this.dialogVisible = true
      this.dialogModel = 'new'
    }
  },
  computed: {
    getTotalCount () {
      return +this.taskData.totalCount
    }
  }
}
</script>

<style lang="scss" scoped></style>
